import React, { Suspense } from 'react'
import { BrowserRouter, Route, Redirect } from 'react-router-dom'

import AuthRoute from './components/AuthRoute'
import Home from './pages/Home'

const CityList = React.lazy(() => import('./pages/CityList'))
const Map = React.lazy(() => import('./pages/Map'))
const HouseDetail = React.lazy(() => import('./pages/HouseDetail'))
const Login = React.lazy(() => import('./pages/Login'))
const Rent = React.lazy(() => import('./pages/Rent'))
const RentAdd = React.lazy(() => import('./pages/Rent/Add'))
const RentSearch = React.lazy(() => import('./pages/Rent/Search'))
const Favorites = React.lazy(() => import('./pages/Favorites'))

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div className="route-loading">Loading...</div>}>
        <div className="App">
          {/* 重定向到/home网址 */}
          <Route path="/" render={() => <Redirect to="/home" />} exact></Route>
          <Route path="/home" component={Home}></Route>
          <Route path="/citylist" component={CityList}></Route>
          <Route path="/map" component={Map}></Route>
          <Route path="/detail/:id" component={HouseDetail}></Route>
          <Route path="/login" component={Login}></Route>
          <AuthRoute path="/rent" component={Rent} exact></AuthRoute>
          <AuthRoute path="/rent/add" component={RentAdd}></AuthRoute>
          <AuthRoute path="/rent/search" component={RentSearch}></AuthRoute>
          <AuthRoute path="/favorites" component={Favorites}></AuthRoute>
        </div>
      </Suspense>
    </BrowserRouter>
  )
}

export default App
